<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, type LocationQueryRaw } from 'vue-router'
import { NButton, NCard, NForm, NFormItem, NInput, NCheckbox, NIcon, type FormInst } from 'naive-ui'
import { UserOutlined, LockOutlined } from '@vicons/antd'
import http from '@/tools/http'
import cipher from '@/tools/cipher'
import { useUserStore } from '@/stores/userStore'

const router = useRouter()
const userStore = useUserStore()

type FormData = {
    account: string
    userPassword: string
}

const formRef = ref<FormInst | null>(null)

const rememberPwd = ref<boolean>(false)
const formData = reactive<FormData>({
    account: "",
    userPassword: ""
})

const formRules = {
    account: {
        required: true,
        message: '请输入账号',
        trigger: ['input']
    },
    userPassword: {
        required: true,
        message: '请输入密码',
        trigger: ['input']
    }
}

const year = ref<number>(2097)

onMounted(() => {
    const date = new Date();
    year.value = date.getFullYear();
    const account = localStorage.getItem("account")
    const password = cipher.sm4Decrypt(localStorage.getItem("password"))
    formData.account = account ? account : ""
    formData.userPassword = password ? password : ""
    if (account && password) {
        rememberPwd.value = true
    }
})

function login() {
    formRef.value?.validate((errors) => {
        if (!errors) {
            const request = {
                account: formData.account,
                password: cipher.sm2Encrypt(formData.userPassword)
            }
            http.post("/auth/login", request).then(({ data }) => {
                if (data.code === "0") {
                    if (rememberPwd.value === true) {
                        localStorage.setItem("account", formData.account)
                        localStorage.setItem("password", cipher.sm4Encrypt(formData.userPassword))
                    } else {
                        localStorage.removeItem("account")
                        localStorage.removeItem("password")
                    }
                    userStore.loadAccountInfo(data.data)
                    const pageName = userStore.currentPageName
                    if (pageName && pageName !== "") {
                        const pageQuery = userStore.getCurrentPageQuery() as LocationQueryRaw
                        if (pageQuery) {
                            router.push({
                                name: pageName,
                                query: pageQuery
                            })
                        } else {
                            router.push({ name: pageName })
                        }
                    } else {
                        router.push({ name: 'home' })
                    }
                }
            })
        }
    })
}
</script>

<template>
    <div class="login">
        <div class="login-form">
            <n-card style="width: 400px" :content-style="{ paddingBottom: 0 }">
                <template #header>
                    <div class="login-form-title">
                        Flame Admin 极速开发平台
                    </div>
                </template>
                <div class="login-form-main">
                    <n-form ref="formRef" :model="formData" :rules="formRules" label-width="52px" label-placement="left"
                        require-mark-placement="left" @keyup.enter="login">
                        <n-form-item path="account">
                            <n-input size="large" v-model:value="formData.account" placeholder="请输入账号" clearable>
                                <template #prefix>
                                    <n-icon :component="UserOutlined" />
                                </template>
                            </n-input>
                        </n-form-item>
                        <n-form-item path="userPassword">
                            <n-input size="large" type="password" v-model:value="formData.userPassword" placeholder="请输入密码"
                                clearable>
                                <template #prefix>
                                    <n-icon :component="LockOutlined" />
                                </template>
                            </n-input>
                        </n-form-item>
                        <n-form-item>
                            <n-checkbox v-model:checked="rememberPwd">记住密码</n-checkbox>
                        </n-form-item>
                    </n-form>
                </div>
                <template #footer>
                    <n-button size="large" style="width:100%" type="primary" @click="login">登录</n-button>
                </template>
            </n-card>
        </div>
        <div class="copyright">
            Copyright © 1997-{{ year }} Wu Xin Tong All Rights Reserved.
        </div>
    </div>
</template>

<style scoped>
.login {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../assets/login_bg.jpg') no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login .login-form {}

.login .login-form .login-form-title {
    display: flex;
    justify-content: center;
}

.login .login-form .login-form-main {}

.login .copyright {
    position: absolute;
    bottom: 0;
    height: 50px;
    display: flex;
    align-items: center;
    color: #ffffff;
    font-weight: bolder;
}
</style>